<template>
  <a-form-model
    :ref="ref"
    :model="model"
    :rules="rules"
    :hideRequiredMark="hideRequiredMark"
    :labelAlign="labelAlign"
    :layout="layout"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
    :colon="colon"
    :validateOnRuleChange="validateOnRuleChange"
  >
    <slot />
  </a-form-model>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';

export default {
  name: 'DForm',
  props: {
    model: {
      type: Object,
      required: true
    },
    rules: {
      type: Object
    },
    hideRequiredMark: {
      type: Boolean,
      default: false
    },
    labelAlign: {
      type: String,
      default: 'right'
    },
    layout: {
      type: String,
      default: 'horizontal'
    },
    labelCol: {
      type: Object
    },
    wrapperCol: {
      type: Object
    },
    colon: {
      type: Boolean,
      default: true
    },
    validateOnRuleChange: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ref: uuidv4()
    };
  },
  methods: {
    validate(method) {
      this.$refs[this.ref].validate(method);
    },
    resetFields() {
      this.$refs[this.ref].resetFields();
    },
    validateField(field, callback) {
      this.$refs[this.ref].validateField(field, callback);
    },
    scrollToField(name, options) {
      this.$refs[this.ref].scrollToField(name, options);
    },
    clearValidate(name) {
      this.$refs[this.ref].clearValidate(name);
    }
  }
};
</script>

<style lang="scss" scoped></style>
